<template>
  <div style="width: 100%;height: 100%;" ref="div">

  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
import UseMockStore from '@/stores/mock'
const MockStore = UseMockStore()

let div = ref()

// 监视仓库数据的变化
watch(() => MockStore.MackObj, () => {
  nextTick(() => {
    // 创建一个echarts的实例
    const mycharts = echarts.init(div.value)
    // 配置图表
    mycharts.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
        // show: true,

      },
      xAxis: {
        type: 'category',
        show: false,
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {
        show: false,
        type: 'value'
      },
      series: [
        {
          barWidth: '60%',
          data: MockStore.MackObj.orderUserTrend,
          type: 'bar'
        }
      ]
    })

  })

})


</script>
<script lang="ts">
export default {
  name: 'Bar'
}
</script>
<style scoped></style>